<template>
    <view class="pages" :class="GlobalThemes.commonBackGroundClass">
        <u-navbar
            :is-back="false"
            back-icon-color="#ffffff"
            :border-bottom="false"
            :background="typelist[tabIndex].background"
        >
            <view class="mp-name">
                <text>{{ i18n.appName }}</text>
            </view>
            <view class="slot-wrap" @click="search">
                <view class="search-wrap">
                    <u-search
                        :placeholder="i18n.searchPlaceholder"
                        shape="round"
                        :clearabled="true"
                        :show-action="true"
                        :action-text="i18n.searchText"
                        :disabled="true"
                        :animation="true"
                        height="64"
                        :inputStyle="{ fontSize: '24rpx' }"
                        bg-color="#f4f4f5"
                    ></u-search>
                </view>
            </view>
        </u-navbar>
        <!-- #ifdef MP-WEIXIN -->
        <addTip></addTip>
        <!-- #endif -->

        <msgs :bg-color="typelist[tabIndex].color" color="#ffffff"></msgs>

        <u-tabs
            :list="typelist"
            :is-scroll="true"
            :current="tabIndex"
            @change="change"
            :bg-color="typelist[tabIndex].color"
            active-color="#fff"
            inactive-color="#f0f1f4"
        ></u-tabs>
        <view class="">
            <swiper
                class="swiper-box"
                :style="{ height: swiperheight + 'px' }"
                :current="tabIndex"
                @change="tabChange"
            >
                <swiper-item>
                    <scroll-view
                        scroll-y
                        class="list"
                        style="height: 100%;"
                        @scrolltolower="getRecommendMore"
                    >
                        <view class="" :style="typelist[tabIndex].bg">
                            <banner
                                :indicatorActiveColor="
                                    typelist[tabIndex].rgbColor
                                "
                                :list="bannerList"
                            />
                        </view>
                        <!-- 推荐 -->
                        <view class="list-content">
                            <vodList
                                :imageBaseUrl="imageUrl"
                                :typeIndex="tabIndex"
                                ref="cateList"
                                :list="recommendVideos.list"
                                :categoryName="i18n.hotVideoTitle"
                                :tabIndexs="tabIndex"
                                :isShowxx="isShowxx"
                                :loading="loading"
                                @click="getRecommendList()"
                                :isShowBtn="false"
                            />
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item>
                    <scroll-view scroll-y class="list" style="height: 100%;">
                        <view class="" :style="typelist[tabIndex].bg">
                            <banner
                                :indicator-color="typelist[tabIndex].color"
                                :list="bannerList"
                            />
                        </view>
                        <!-- 电影 -->
                        <view class="list-content">
                            <vodList
                                :imageBaseUrl="imageUrl"
                                :typeIndex="tabIndex"
                                ref="cateList"
                                :list="hotVideos.list"
                                :categoryName="i18n.hotVideoTitle"
                                :tabIndexs="tabIndex"
                                :isShowxx="isShowxx"
                                :loading="loading"
                                @click="getMoviesList()"
                            />
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item>
                    <scroll-view scroll-y class="list" style="height: 100%;">
                        <view class="" :style="typelist[tabIndex].bg">
                            <banner
                                :indicator-color="typelist[tabIndex].color"
                                :list="bannerList"
                            />
                        </view>
                        <view class="list-content">
                            <!-- 电视剧 -->
                            <vodList
                                :imageBaseUrl="imageUrl"
                                :typeIndex="tabIndex"
                                ref="cateList"
                                :list="ihotVideos.list"
                                :categoryName="i18n.hotVideoTitle"
                                :tabIndexs="tabIndex"
                                :isShowxx="isShowxx"
                                :loading="loading"
                                @click="getTvViedeosList()"
                            />
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item>
                    <scroll-view scroll-y class="list" style="height: 100%;">
                        <view class="" :style="typelist[tabIndex].bg">
                            <banner
                                :indicator-color="typelist[tabIndex].color"
                                :list="bannerList"
                            />
                        </view>
                        <!-- 动漫 -->
                        <view class="list-content">
                            <vodList
                                :imageBaseUrl="imageUrl"
                                :typeIndex="tabIndex"
                                ref="cateList"
                                :list="acgViedeos.list"
                                :categoryName="i18n.hotVideoTitle"
                                :tabIndexs="tabIndex"
                                :isShowxx="isShowxx"
                                :loading="loading"
                                @click="getAcgViedeosList()"
                            />
                        </view>
                    </scroll-view>
                </swiper-item>
                <swiper-item>
                    <scroll-view scroll-y class="list" style="height: 100%;">
                        <view class="" :style="typelist[tabIndex].bg">
                            <banner
                                :indicator-color="typelist[tabIndex].color"
                                :list="bannerList"
                            />
                        </view>
                        <!-- 综艺 -->
                        <view class="list-content">
                            <vodList
                                :imageBaseUrl="imageUrl"
                                :typeIndex="tabIndex"
                                ref="cateList"
                                :list="varietyViedeos.list"
                                :categoryName="i18n.hotVideoTitle"
                                :tabIndexs="tabIndex"
                                :isShowxx="isShowxx"
                                :loading="loading"
                                @click="getVarietyViedeosList()"
                            />
                        </view>
                    </scroll-view>
                </swiper-item>
            </swiper>
            <u-tabbar
                id="uTabbar"
                v-model="tarbarObj.tarbarCurrent"
                :list="tarbarObj.tarbarList"
                :border-top="true"
                :mid-button="tarbarObj.midButton"
                bg-color="#fff"
                :inactiveColor="typelist[tabIndex].color"
                :activeColor="tarbarObj.activeColor"
                icon-size="40"
                :height="tarbarObj.height"
                mid-button-size="80"
            ></u-tabbar>
        </view>
        
        <drag-button
            ref="drag"
        	:isDock="true"
        	:existTabBar="true"
            :dragInfo="dragInfo"
            :dragStyle="dragStyle"
            @hide="btnHide"
        	@btnClick="btnClick"
        />
        
        <!-- 首页弹出层 -->
        <karam-popup ref="popup" :popup-type="popup.popup_type" :popup-info="popup"></karam-popup>
        
        <!-- 加载条 -->
        <w-loading
            :text="_i18n('common').loading"
            mask="true"
            click="false"
            ref="loading"
        ></w-loading>
    </view>
</template>

<script>
import addTip from '@/components/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';
import vodList from '@/components/lists/vodLists.vue';
import banner from '@/components/banner/banner.vue';
import KaramPopup from '@/components/karam617-popup/popup.vue';
import msgs from '@/components/msgs.vue';
import dragButton from "@/components/drag-button/drag-button.vue";
import Methods from './methods.js';
export default {
    components: {
        vodList,
        banner,
        addTip,
        KaramPopup,
        msgs,
        dragButton
    },
    ...Methods
};
</script>
<style>
page {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}
</style>
<style lang="scss" scoped>
.slot-wrap {
    display: flex;
    align-items: center;
    flex: 1;
}
.search-wrap {
    margin: 0 20rpx;
    flex: 1;
}
.u-input {
    font-size: 1.3rem;
}
.u-fixed-placeholder {
    display: none;
}
.pages {
    .mp-name {
        color: #fff;
        padding-left: 40rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .list-content {
        padding-bottom: 100upx;
    }
}
</style>
